<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布订阅模式</title>
</head>

<body>
    <script>
        // 发布订阅模式: 一对多的关系

        // 1. 发布者: 售楼部
        // 2. 接收者: 买房人
        // 3. 通过列表进行缓存, 当事件触发时依次执行回调函数 


        // 方法一: 

        // var saleOffice = {}
        // saleOffice.list = {}
        // // {100: [], 150: []}

        // saleOffice.listen = function (square, fn) {
        //     if (!this.list.square) {
        //         this.list.square = []
        //     } else {
        //         this.list.square.push(fn)
        //     }
        // }

        // saleOffice.trigger = function () {
        //     var square = arguments[0]
        //     for (var i = 0; i < saleOffice.list.square.length; i++) {
        //         this.list.square[i].apply(this, arguments)
        //     }
        // }

        // 张三来买房了 
        // saleOffice.listen(100, function (square, price) {
        //     console.log('面积是:' + square)
        //     console.log('价格是:' + price)
        // })
        // // 李四来买房了 
        // saleOffice.listen(150, function (square, price) {
        //     console.log('面积是:' + square)
        //     console.log('价格是:' + price)
        // })

        // saleOffice.trigger(100, 1000)
        // saleOffice.trigger(150, 1000)


        // 方法二: 

        // var event = {
        //     list: {},
        //     listen: function (square, fn) {
        //         if (!this.list.square) {
        //             this.list.square = []
        //         } else {
        //             this.list.square.push(fn)
        //         }
        //     },
        //     trigger () {
        //         var square = arguments[0]
        //         for (var i = 0; i < saleOffice.list.square.length; i++) {
        //             this.list.square[i].apply(this, arguments)
        //         }
        //     }
        // }

        // function registerEvent (target, source) {
        //     for (var key in source) {
        //         target[key] = source[key]
        //     }
        //     return target
        // }

        // var saleOffice = {}
        // registerEvent(saleOffice, event)

        // // 张三来买房了 
        // saleOffice.listen(100, function (square, price) {
        //     console.log('面积是:' + square)
        //     console.log('价格是:' + price)
        // })
        // // 李四来买房了 
        // saleOffice.listen(150, function (square, price) {
        //     console.log('面积是:' + square)
        //     console.log('价格是:' + price)
        // })

        // saleOffice.trigger(100, 1000)
        // saleOffice.trigger(150, 1000)


        // 方法三: 
        class Event {
            constructor() {
                this.list = {}
            }
            listen (square, fn) {
                if (!this.list.square) {
                    this.list.square = []
                } else {
                    this.list.square.push(fn)
                }
            }
            notice () {
                var square = arguments[0]
                for (var i = 0; i < this.list.square.length; i++) {
                    this.list.square[i].apply(this, arguments)
                }
            }
        }

        class SaleOffice extends Event {
            constructor() {
                super()
            }
        }

        var saleOffice = new SaleOffice()
        // 张三来买房了 
        saleOffice.listen(100, function (square, price) {
            console.log('面积是:' + square)
            console.log('价格是:' + price)
        })
        // 李四来买房了 
        saleOffice.listen(150, function (square, price) {
            console.log('面积是:' + square)
            console.log('价格是:' + price)
        })

        saleOffice.notice(100, 1000)
        saleOffice.notice(150, 1000)

    </script>
</body>

</html>